<template>
    <div class="tuijian">
        <!-- 标题 -->
        <div class="title">
            <span>推荐歌单</span>
            <el-icon>
                <ArrowRight />
            </el-icon>
        </div>
        <!-- 歌单列表 -->
        <div class="playlists">
            <div class="item" v-for="item in playlists" :key="item.id" @click="toDetailsPage(item.id)" >
                <el-card :body-style="{ padding: '0.5rem' }" shadow="hover">
                    <img :src="item.picUrl"  />
                    <div class="name">
                        <span>{{ item.name }}</span>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Tjson from '../../api/findMusic/Tjson/Tjson'
import router from '../../router'

let playlists = ref()

onMounted(async () => {
    let res: any = await Tjson()
    playlists.value = res.result
})

function toDetailsPage(id:number){
    router.push({
        name:'playlistDetails',
        params: { id }
    })
}

</script>

<style lang="less" scoped>
.tuijian {
    width: 100%;

    .title {
        margin-bottom: 0.5rem;
        cursor: default;
        line-height: 24px;
        font-size: 24px;
        font-weight: bold;

        .el-icon {
            position: relative;
            top: 0.2rem;
        }
    }

    
}
.playlists {
        display: grid;
        // 每行5个
        grid-template-columns: repeat(5, 1fr);

        .item {
            margin: 0.5rem;
            cursor: pointer;

            img {
                width: 100%;
                min-height: 10rem;
                border-radius: 0.5rem;
            }

            span {
                display: block;
                height: auto;
                text-align: center;
                font-size: 13px;
            }
        }
    }
</style>